<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '新增投诉/建议',
			size: '530px',
			appendToBody: true
		}"
		showConfirm
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="基本信息" prop="type">
				<cl-select v-model="form.type" placeholder="请选择" filterable style="width: 100%">
					<el-option
						v-for="item in $const.ADVICE_TYPE"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item prop="content">
				<template #label>
					内容<span class="tips">(可附最多五张图,图片非必传)</span>
				</template>
				<el-input
					v-model="form.content"
					placeholder="请填写原因"
					type="textarea"
					:rows="5"
					style="margin-bottom: 15px"
				/>
				<cl-upload
					multiple
					:limit="5"
					:limit-size="5"
					list-type="picture-card"
					ref="uploads"
					v-model="form.img"
				/>
			</el-form-item>
		</el-form>
	</cl-drawer>
</template>
<script>
export default {
	data() {
		return {
			form: {
				type: 2,
				content: "",
				img: ""
			},
			rules: {
				type: [{ required: true, message: "请选择类型", trigger: "change" }],
				content: [{ required: true, message: "请填写内容", trigger: "change" }]
			},
			saving: false
		};
	},
	methods: {
		open() {
			this.$refs.drawer.create();
		},
		close() {
			this.$refs.drawer.close();
		},
		reset() {
			this.form.type = 2;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let { img, ...args } = this.form;
				let form = {
					...args,
					img: img.split(",")
				};
				this.saving = true;
				await this.$service.user.complaint(form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		}
	}
};
</script>
